{% extends "base.html" %}

{% block content %}
<div class="content-wrapper">
  <section class="content">
    <div class="row">
      <div class="col-xs-12">
        <div class="box">
          <div class="box-header">
            <h3 class="box-title">Sip Accounts</h3>
            <p class="pull-right"><a class="btn btn-success" href="{{ url_for('sip-account.create') }}">Add</a></p>
          </div>
          {% with messages = get_flashed_messages() %}
          <div class="box-header">
            {% if messages %}
            <ul class="alert alert-success">
              {% for message in messages %}
                  <li>{{ message | safe }}</li>
              {% endfor %}
            </ul>
            {% endif %}
          </div>
          {% endwith %}

          <!-- /.box-header -->
          <div class="box-body">
            <div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
              <div class="row">
                <div class="col-sm-6"></div>
                <div class="col-sm-6"></div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <table id="example2" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
                    <thead>
                      <tr role="row">
                        <th class="sorting_asc" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"  aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending">ID</th>
                        <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Username</th>
                        <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending">Domain</th>
                        <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Toll Allow</th>
                        <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Context</th>
                        <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Caller Number</th>
                        <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Caller Name</th>
                        <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Max Calls</th>
                        <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Created</th>
                        <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Operation</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for account in sipaccs %}
                      <tr role="row" class="odd">
                        <td class="sorting_1">{{ account.id }}</td>
                        <td>{{ account.username }}</td>
                        <td>{{ account.domain }}</td>
                        <td>{{ account.toll_allow }}</td>
                        <td>{{ account.context }}</td>
                        <td>{{ account.caller_number }}</td>
                        <td>{{ account.caller_name }}</td>
                        <td>{{ account.max_calls }}</td>                        
                        <td>{{ account.timestamp }}</td>                        
                        <td>
                            <a class="alert" href={{ url_for('sip-account.show', id=account.id) }}><i class="fa fa-eye" aria-hidden="true"></i></a>
                            <a class="alert" href={{ url_for('sip-account.edit', id=account.id) }}><i class="fa fa-pencil" style="color:green" aria-hidden="true"></i></a>
                            <a class="alert" href={{ url_for('sip-account.delete', id=account.id) }}><i class="fa fa-trash" style="color:red" aria-hidden="true"></i></a>
                          </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                    <!-- <tfoot>
                      <tr>
                        <th rowspan="1" colspan="1">Rendering engine</th>
                        <th rowspan="1" colspan="1">Browser</th>
                        <th rowspan="1" colspan="1">Platform(s)</th>
                        <th rowspan="1" colspan="1">Engine version</th>
                        <th rowspan="1" colspan="1">CSS grade</th>
                      </tr>
                    </tfoot> -->
                  </table>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-5">
                  <div class="dataTables_info" id="example2_info" role="status" aria-live="polite">Showing 1 to 10 of 57 entries</div>
                </div>
                <div class="col-sm-7">
                  <div class="dataTables_paginate paging_simple_numbers" id="example2_paginate">
                    <ul class="pagination">
                      <li class="paginate_button previous disabled" id="example2_previous">
                        <a href="#" aria-controls="example2" data-dt-idx="0" tabindex="0">Previous</a>
                      </li>
                      <li class="paginate_button active">
                        <a href="#" aria-controls="example2" data-dt-idx="1" tabindex="0">1</a>
                      </li>
                      <li class="paginate_button ">
                        <a href="#" aria-controls="example2" data-dt-idx="2" tabindex="0">2</a>
                      </li>
                      <li class="paginate_button ">
                        <a href="#" aria-controls="example2" data-dt-idx="3" tabindex="0">3</a>
                      </li>
                      <li class="paginate_button ">
                        <a href="#" aria-controls="example2" data-dt-idx="4" tabindex="0">4</a>
                      </li>
                      <li class="paginate_button ">
                        <a href="#" aria-controls="example2" data-dt-idx="5" tabindex="0">5</a>
                      </li>
                      <li class="paginate_button ">
                        <a href="#" aria-controls="example2" data-dt-idx="6" tabindex="0">6</a>
                      </li>
                      <li class="paginate_button next" id="example2_next">
                        <a href="#" aria-controls="example2" data-dt-idx="7" tabindex="0">Next</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </section>
</div>
{% endblock %}